<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Travel | Bootstrap blog</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Swiper slider-->
    <link rel="stylesheet" href="vendor/swiper/swiper-bundle.min.css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="vendor/owl.carousel2/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="vendor/owl.carousel2/assets/owl.theme.default.min.css">
    <!-- Google fonts-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:300,400&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&amp;display=swap">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.png">
  </head>
  <body>
    <!-- Header-->
    <header class="header">
      <!-- Top bar -->
      <div class="py-2 bg-dark text-white">
        <div class="container py-1">
          <div class="row align-items-center">
            <div class="col-lg-4">
              <ul class="list-inline mb-0 text-sm">
                <li class="list-inline-item"><a class="reset-anchor" href="#!">About us</a></li>
                <li class="list-inline-item">|</li>
                <li class="list-inline-item"><a class="reset-anchor" href="#!">Sitemap</a></li>
              </ul>
            </div>
            <div class="col-lg-4 d-none d-lg-block text-center">
              <ul class="list-inline mb-0 small">
                <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-facebook-f"></i></a></li>
                <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-twitter"></i></a></li>
                <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-instagram"></i></a></li>
                <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-youtube"></i></a></li>
                <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-vimeo-v"></i></a></li>
              </ul>
            </div>
            <div class="col-lg-4 d-none d-lg-block text-end">
              <div class="dropdown text-sm"><a class="reset-anchor dropdown-toggle" id="destinations" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false"><i class="fas fa-globe-americas me-2"></i>Destinations</a>
                <div class="dropdown-menu dropdown-menu-end mt-3" aria-labelledby="destinations"><a class="dropdown-item text-sm" href="#!">France</a><a class="dropdown-item text-sm" href="#!">Germany</a><a class="dropdown-item text-sm" href="#!">Spain</a><a class="dropdown-item text-sm" href="#!">Egypt</a><a class="dropdown-item text-sm" href="#!">Thailand</a><a class="dropdown-item text-sm" href="#!">Indonesia</a><a class="dropdown-item text-sm" href="#!">Maldives</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Navbar 1 -->
      <nav class="navbar navbar-expand-lg navbar-light bg-white py-4">
        <div class="container text-center"><a class="navbar-brand mx-auto" href="index.html"><img class="mb-2" src="img/logo.svg" alt="" width="140">
            <p class="text-sm text-uppercase text-gray mb-0">Your next pocket travel guide</p></a></div>
      </nav>
      <!-- Navbar 2 -->
      <nav class="navbar navbar-expand-lg navbar-light border-gray py-2 bg-light">
        <div class="container">
          <button class="navbar-toggler navbar-toggler-right mx-auto border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
          <div class="collapse navbar-collapse text-center" id="navbarSupportedContent">
            <ul class="navbar-nav mx-auto">
              <li class="nav-item px-1">
                <!-- Link--><a class="nav-link" href="index.html">Home</a>
              </li>
              <li class="nav-item px-1">
                <!-- Link--><a class="nav-link" href="listing.html">Category</a>
              </li>
              <li class="nav-item px-1">
                <!-- Link--><a class="nav-link active" href="post.html">Post</a>
              </li>
              <li class="nav-item px-1 dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
                <div class="dropdown-menu text-center text-lg-start shadow-sm" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="index.html">Home</a><a class="dropdown-item" href="listing.html">Category</a><a class="dropdown-item" href="post.html">Post</a></div>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <section class="py-5">
      <div class="container text-center">
        <p class="h6 mb-0 text-uppercase text-primary">Lifestyle</p>
        <h1>The secret to find a amusing place</h1>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aliquid</p>
        <ul class="list-inline small text-uppercase mb-0">
          <li class="list-inline-item align-middle"><img class="rounded-circle shadow-sm" src="img/person-1.jpg" alt="" width="40"/></li>
          <li class="list-inline-item me-0 text-muted align-middle">By </li>
          <li class="list-inline-item align-middle me-0"><a class="fw-bold reset-anchor" href="#!">Jason Doe</a></li>
          <li class="list-inline-item text-muted align-middle me-0">|</li>
          <li class="list-inline-item text-muted align-middle me-0">June 15, 2019</li>
          <li class="list-inline-item text-muted align-middle me-0">|</li>
          <li class="list-inline-item text-muted align-middle">20 Comments</li>
        </ul>
      </div><img class="w-100 py-5" src="img/post-banner.jpg" alt="">
      <div class="container">
        <div class="row gy-5">
          <div class="col-lg-8">
            <p class="lead first-letter-styled lh-4">L orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
            <div class="px-lg-5 mb-5">
              <blockquote class="blockquote-custom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</blockquote>
            </div>
            <h2>Heading level two</h2>
            <p class="text-muted mb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p><img class="img-fluid mb-4" src="img/post-img-1.jpg" alt="">
            <p class="text-muted mb-5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
            <h3 class="mb-4">Heading level three</h3>
            <ul class="list-check text-muted text-sm mb-5">
              <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
              <li class="mb-1">Inventore magni sed error dignissimos repudiandae.</li>
              <li class="mb-1">Aperiam cum, nisi sed aliquam soluta amet molestiae.</li>
              <li class="mb-1">Consequatur sequi dolore, doloribus officia Nihil fugit.</li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p class="mb-5">Possimus animi modi praesentium quis delectus libero architecto ipsum sint iure amet rerum incidunt, harum facere voluptatibus eligendi. Velit sapiente omnis earum, facilis harum est debitis tenetur deserunt tempora explicabo!</p>
            <div class="p-4 bg-light mb-5">
              <ul class="list-inline mb-0">
                <li class="list-inline-item me-2 pe-lg-2"><a class="tag reset-anchor" href="#!"><i class="fas fa-bookmark text-primary me-2"></i>Travel</a></li>
                <li class="list-inline-item me-2 pe-lg-2"><a class="tag reset-anchor" href="#!"><i class="fas fa-bookmark text-primary me-2"></i>Lifestyle</a></li>
                <li class="list-inline-item me-2 pe-lg-2"><a class="tag reset-anchor" href="#!"><i class="fas fa-bookmark text-primary me-2"></i>Vacation</a></li>
              </ul>
            </div>
            <h3 class="h4 mb-4">Share this post</h3>
            <ul class="list-inline mb-5">
              <li class="list-inline-item me-1 mb-3"><a class="social-link-share facebook" href="#!"><i class="me-2 fab fa-facebook-f"></i>Share</a></li>
              <li class="list-inline-item me-1 mb-3"><a class="social-link-share twitter" href="#!"><i class="me-2 fab fa-twitter"></i>Tweet</a></li>
              <li class="list-inline-item me-1 mb-3"><a class="social-link-share instagram" href="#!"><i class="me-2 fab fa-instagram"></i>Share</a></li>
            </ul>
            <h3 class="h4 mb-4">Leave a comment</h3>
            <form class="mb-5" action="#">
              <div class="row gy-3">
                <div class="col-lg-6">
                  <input class="form-control" type="text" name="name" placeholder="Full Name e.g. Jason Doe">
                </div>
                <div class="col-lg-6">
                  <input class="form-control" type="email" name="email" placeholder="Email Address e.g. Jason@email.com">
                </div>
                <div class="col-lg-12">
                  <textarea class="form-control" name="message" rows="5" placeholder="Leave your message"></textarea>
                </div>
                <div class="col-lg-12">
                  <button class="btn btn-dark" type="submit">Submit your comment</button>
                </div>
              </div>
            </form>
            <h3 class="h4 mb-4 d-flex align-items-center"><span>Comments</span><span class="text-sm ms-3 text-gray">- 3 Comments</span></h3>
            <ul class="list-unstyled comments">
              <li>
                <div class="d-flex mb-4">
                  <div class="pe-2 flex-grow-1" style="width: 75px; min-width: 75px;"><img class="rounded-circle shadow-sm img-fluid img-thumbnail" src="img/person-1.jpg" alt=""/></div>
                  <div class="ps-2">
                    <p class="small mb-0 text-primary">15 Aug 2019</p>
                    <h5>Jimmy Roy</h5>
                    <p class="text-muted text-sm mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At.</p><a class="reset-anchor text-sm" href="#!"><i class="fas fa-share me-2 text-primary"></i><strong>Reply</strong></a>
                  </div>
                </div>
                <ul class="list-unstyled">
                  <li> 
                    <div class="d-flex mb-4">
                      <div class="pe-2 flex-grow-1" style="width: 75px; min-width: 75px;"><img class="rounded-circle shadow-sm img-fluid img-thumbnail" src="img/person-2.jpg" alt=""/></div>
                      <div class="ps-2">
                        <p class="small mb-0 text-primary">19 Sep 2019</p>
                        <h5>Melissa Johanson</h5>
                        <p class="text-muted text-sm mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At.</p><a class="reset-anchor text-sm" href="#!"><i class="fas fa-share me-2 text-primary"></i><strong>Reply</strong></a>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
              <li>
                <div class="d-flex mb-4">
                  <div class="pe-2 flex-grow-1" style="width: 75px; min-width: 75px;"><img class="rounded-circle shadow-sm img-fluid img-thumbnail" src="img/person-3.jpg" alt=""/></div>
                  <div class="ps-2">
                    <p class="small mb-0 text-primary">10 Oct 2019</p>
                    <h5>David Nguyen</h5>
                    <p class="text-muted text-sm mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At.</p><a class="reset-anchor text-sm" href="#!"><i class="fas fa-share me-2 text-primary"></i><strong>Reply</strong></a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-lg-4">
            <!-- About me widget -->
            <div class="mb-5 text-center"><img class="mb-3 rounded-circle img-thumbnail shadow-sm" src="img/author.jpg" alt="" width="110">
              <h3 class="h4">About me</h3>
              <p class="text-sm text-muted px-sm-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p><img class="d-block mx-auto mb-3" src="img/signature.png" alt="" width="60">
              <ul class="list-inline text-sm mb-0">
                <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-facebook-f"></i></a></li>
                <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-twitter"></i></a></li>
                <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-instagram"></i></a></li>
                <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-youtube"></i></a></li>
                <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-vimeo-v"></i></a></li>
              </ul>
            </div>
            <!-- Categories widget -->
            <div class="mb-5 text-center"><a class="category reset-anchor bg-cover bg-center mb-2" href="#!" style="background: url(img/category-1.jpg)">
                <p class="category-title text-uppercase small">Lifestyle</p></a><a class="category reset-anchor bg-cover bg-center mb-2" href="#!" style="background: url(img/category-2.jpg)">
                <p class="category-title text-uppercase small">Travel</p></a><a class="category reset-anchor bg-cover bg-center" href="#!" style="background: url(img/category-3.jpg)">
                <p class="category-title text-uppercase small">Vacation</p></a></div>
            <!-- Newsletter widget -->
            <div class="px-4 py-5 bg-light mb-5 text-center">
              <h3 class="h5"><i class="far fa-envelope me-2"></i>Join the family</h3>
              <p class="text-sm text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
              <form action="#">
                <div class="mb-1">
                  <input class="form-control form-control-sm" type="email" name="email" placeholder="Emaill address">
                </div>
                <div class="mb-0">
                  <button class="btn btn-dark w-100 btn-sm" type="submit">Subscribe</button>
                </div>
              </form>
            </div>
            <!-- Latest posts widget -->
            <div class="mb-5">
              <h3 class="h5">Latest posts</h3>
              <p class="text-sm text-muted mb-4">Lorem ipsum dolor sit, consectetur adipisicing elit, sed do eiusmod.</p>
              <ul class="list-unstyled">
                <li class="d-flex mb-1"><a href="post.html"><img src="img/recent-posts-thumb-1.jpg" alt="" width="80"></a>
                  <div class="media-body ms-3">
                    <p class="small text-primary text-uppercase mb-0">5 Aug 2018</p>
                    <h6 class="mb-1"><a class="reset-anchor" href="post.html">The top climbing tours</a></h6>
                    <p class="small text-muted">Lorem ipsum dolor sit, consectetur adipisicing elit, sed.</p>
                  </div>
                </li>
                <li class="d-flex mb-1"><a href="post.html"><img src="img/recent-posts-thumb-2.jpg" alt="" width="80"></a>
                  <div class="media-body ms-3">
                    <p class="small text-primary text-uppercase mb-0">5 Aug 2018</p>
                    <h6 class="mb-1"><a class="reset-anchor" href="post.html">Travel guide to Canada</a></h6>
                    <p class="small text-muted">Lorem ipsum dolor sit, consectetur adipisicing elit, sed.</p>
                  </div>
                </li>
                <li class="d-flex mb-1"><a href="post.html"><img src="img/recent-posts-thumb-3.jpg" alt="" width="80"></a>
                  <div class="media-body ms-3">
                    <p class="small text-primary text-uppercase mb-0">5 Aug 2018</p>
                    <h6 class="mb-1"><a class="reset-anchor" href="post.html">A day in Tailand</a></h6>
                    <p class="small text-muted">Lorem ipsum dolor sit, consectetur adipisicing elit, sed.</p>
                  </div>
                </li>
              </ul>
            </div>
            <!-- Instagram widget -->
            <div class="mb-5">
              <h3 class="h5">Follow on Instagram</h3>
              <p class="text-sm text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
              <div class="row gx-0">
                <div class="col-3"><a class="instagram-item overlay-hover-dark-sm d-block w-100" href="#!">
                    <div class="overlay-content"><img class="img-fluid" src="img/instagram-1.jpg" alt=""></div></a></div>
                <div class="col-3"><a class="instagram-item overlay-hover-dark-sm d-block w-100" href="#!">
                    <div class="overlay-content"><img class="img-fluid" src="img/instagram-2.jpg" alt=""></div></a></div>
                <div class="col-3"><a class="instagram-item overlay-hover-dark-sm d-block w-100" href="#!">
                    <div class="overlay-content"><img class="img-fluid" src="img/instagram-3.jpg" alt=""></div></a></div>
                <div class="col-3"><a class="instagram-item overlay-hover-dark-sm d-block w-100" href="#!">
                    <div class="overlay-content"><img class="img-fluid" src="img/instagram-4.jpg" alt=""></div></a></div>
                <div class="col-3"><a class="instagram-item overlay-hover-dark-sm d-block w-100" href="#!">
                    <div class="overlay-content"><img class="img-fluid" src="img/instagram-5.jpg" alt=""></div></a></div>
                <div class="col-3"><a class="instagram-item overlay-hover-dark-sm d-block w-100" href="#!">
                    <div class="overlay-content"><img class="img-fluid" src="img/instagram-6.jpg" alt=""></div></a></div>
                <div class="col-3"><a class="instagram-item overlay-hover-dark-sm d-block w-100" href="#!">
                    <div class="overlay-content"><img class="img-fluid" src="img/instagram-8.jpg" alt=""></div></a></div>
                <div class="col-3"><a class="instagram-item overlay-hover-dark-sm d-block w-100" href="#!">
                    <div class="overlay-content"><img class="img-fluid" src="img/instagram-1.jpg" alt=""></div></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer class="bg-dark py-4">
      <div class="container">
        <div class="row py-2 gy-2">
          <div class="col-lg-4 text-center text-lg-start">
            <p class="small text-muted text-uppercase mb-0">&copy; copyright - all rights reserved</p>
          </div>
          <div class="col-lg-4 text-center">
            <ul class="list-inline text-white small mb-0">
              <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-facebook-f"></i></a></li>
              <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-twitter"></i></a></li>
              <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-instagram"></i></a></li>
              <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-youtube"></i></a></li>
              <li class="list-inline-item"><a class="reset-anchor" href="#!"><i class="fab fa-vimeo-v"></i></a></li>
            </ul>
          </div>
          <div class="col-lg-4 text-center text-lg-end">
            <p class="small text-muted text-uppercase mb-0"><a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a>. </p>
          </div>
        </div>
      </div>
    </footer>
    <!-- JavaScript files-->
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/swiper/swiper-bundle.min.js"></script>
    <script src="js/front.js"></script>
    <script>
      // ------------------------------------------------------- //
      //   Inject SVG Sprite - 
      //   see more here 
      //   https://css-tricks.com/ajaxing-svg-sprite/
      // ------------------------------------------------------ //
      function injectSvgSprite(path) {
      
          var ajax = new XMLHttpRequest();
          ajax.open("GET", path, true);
          ajax.send();
          ajax.onload = function(e) {
          var div = document.createElement("div");
          div.className = 'd-none';
          div.innerHTML = ajax.responseText;
          document.body.insertBefore(div, document.body.childNodes[0]);
          }
      }
      // this is set to BootstrapTemple website as you cannot 
      // inject local SVG sprite (using only 'icons/orion-svg-sprite.svg' path)
      // while using file:// protocol
      // pls don't forget to change to your domain :)
      injectSvgSprite('icons/orion-svg-sprite.svg'); 
      
    </script>
    <!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </body>
</html>